<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索检测</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
        }
        .container {
            max-width: 800px;
            margin: auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
        }
        input, select {
            margin: 10px 0;
            padding: 8px;
            width: 100%;
            max-width: 300px;
        }
        .button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
        }
        .button:hover {
            background-color: #45a049;
        }
        table {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        .pagination {
            margin-top: 20px;
        }
        .pagination button {
            padding: 5px 10px;
            margin: 0 5px;
            border: 1px solid #ddd;
            background-color: #f2f2f2;
            cursor: pointer;
        }
        .pagination button:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>码农手搓调剂查询系统v0.0</h1>
        <!-- 搜索表单 -->
        <div>
            <input type="text" id="school" placeholder="请输入一志愿学校">
            <input type="number" id="score_min" placeholder="分数范围最小值">
            <input type="number" id="score_max" placeholder="分数范围最大值">
            <input type="text" id="application_id" placeholder="请输入一志愿报考专业代码">
            <button class="button" onclick="searchData()">搜索</button>
        </div>
        <!-- 搜索结果表格 -->
        <table id="resultTable">
            <thead>
                <tr>
                    <th>一志愿学校</th>
                    <th>分数</th>
                    <th>报考专业代码</th>
                    <th>调剂学校</th>
                    <th>调剂学院</th>
                    <th>调剂专业代码</th>
                    <th>调剂专业名称</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
        <!-- 分页按钮 -->
        <div class="pagination" id="pagination"></div>
    </div>
    <script>
        let currentPage = 1;
        const pageSize = 10;
        // 用于存储从后台获取的数据
        let totalRecords = 0;
        function searchData() {
            const school = document.getElementById("school").value;
            const scoreMin = parseInt(document.getElementById("score_min").value) || 0;
            const scoreMax = parseInt(document.getElementById("score_max").value) || 9999;
            const applicationId = document.getElementById("application_id").value;
            // 向后台发送请求
            fetch(`http://127.0.0.1:8000/tiaojisystem/searchapi?school=${school}&score_min=${scoreMin}&score_max=${scoreMax}&application_id=${applicationId}&page=${currentPage}&page_size=${pageSize}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        totalRecords = data.totalRecords;  // 后台返回的总记录数
                        renderTable(data.results);  // 渲染表格数据
                        renderPagination(totalRecords);  // 渲染分页按钮
                    } else {
                        alert('数据获取失败');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('请求失败，请重试');
                });
        }
        function renderTable(records) {
            const tableBody = document.getElementById("resultTable").getElementsByTagName('tbody')[0];
            tableBody.innerHTML = ''; // 清空之前的数据
            records.forEach(item => {
                const row = tableBody.insertRow();
                row.insertCell(0).textContent = item.yizhiyuanschool;
                row.insertCell(1).textContent = item.chushiscore;
                row.insertCell(2).textContent = item.baokaozhuanyecode;
                row.insertCell(3).textContent = item.tiaojischool;
                row.insertCell(4).textContent = item.tiaojixueyuan;
                row.insertCell(5).textContent = item.tiaojizhuanyecode;
                row.insertCell(6).textContent = item.tiaojizhuanyename;
            });
        }
        function renderPagination(totalRecords) {
            const totalPages = Math.ceil(totalRecords / pageSize);
            const paginationDiv = document.getElementById("pagination");
            paginationDiv.innerHTML = '';

            for (let i = 1; i <= totalPages; i++) {
                const button = document.createElement("button");
                button.textContent = i;
                button.onclick = () => {
                    currentPage = i;
                    searchData();
                };
                paginationDiv.appendChild(button);
            }
        }
        // 初始加载，显示第一页数据
        searchData();
    </script>
</body>
</html>
